<script lang="ts" setup>
import { ref } from 'vue'
import { useCascaderOptions } from '../../ts/useCascaderOptions';
import { useRadioOptionStore } from '../../stores/radioStore';

const radioStore = useRadioOptionStore()
const { dataValue, s, value, options, f, queryData} = useCascaderOptions();
const tableData = [
  {
    id: 1,
    lineName: 'XYF',
    stationName: 'TS2',
    stationDescription: '提升架组件装配2号台',
    peakCoefficient: 0.01,
    contactPosition: 100,
    forceStartPosition: 194,
    contactThreshold: 0.1,
    forceRiseThreshold: 0.18,
    filterHighestPoint: true,
    highestPointThreshold: 1,
    isActive: true,
  },
]

// 仅包含今天和一个月前的快捷选项
const shortcuts = ref([
  {
    text: '今天',
    value: new Date(),
  },
  {
    text: '一个月前',
    value: () => {
      const date = new Date()
      date.setMonth(date.getMonth() - 1)
      return date
    },
  },
])

</script>

<template>
    <div class="radio-button">
    <el-radio-group v-model="radioStore.selectedOption" size="large">
      <el-radio-button label="平滑段阈值分析" value="smooth" />
      <el-radio-button label="上升段阈值分析" value="rise" />
      <el-radio-button label="本月异常点个数统计" value="abnormal" />
      <el-radio-button label="异常点于标准曲线位置" value="position" />
    </el-radio-group>
  </div>
  <div class="select">
    <div class="m-4">
      <div style="color: blue; font-weight: bold;">产线/工位—选项:</div>
      <el-cascader style="width: 200px; margin-top: 20px" v-model="value" :options="options" />
    </div>

    <div class="block">
      <p style="color: blue; font-weight: bold; margin-top: 0px;">日期选择器</p>
      <el-date-picker
        style="width: 200px;"
        v-model="dataValue"
        format="YYYY年MM月"
        value-format="YYYY-MM"
        type="month"
        placeholder="选择日期"
        :shortcuts="shortcuts"
      />
    </div>

    <el-button
      style="width: 100px; margin: 20px;"
      type="primary"
      @click="queryData"
    >
      查询
    </el-button>
  </div>

  <div class="info">
    <el-table :data="tableData" border style="margin-left: -20px">
        <el-table-column prop="id" label="序号" />
        <el-table-column prop="lineName" label="产线名称" />
        <el-table-column prop="stationName" label="工位名称" />
        <el-table-column prop="stationDescription" label="工位描述" />
        <el-table-column prop="peakCoefficient" label="寻峰系数" />
        <el-table-column prop="contactPosition" label="压装接触位置" />
        <el-table-column prop="forceStartPosition" label="压装受力开始位置" />
        <el-table-column prop="contactThreshold" label="压装接触位置过滤阀值" />
        <el-table-column prop="forceRiseThreshold" label="压装受力上升位置过滤阀值" />
        <el-table-column prop="filterHighestPoint" label="是否过滤最高点">
          <template #default="{ row }">
            <el-switch v-model="row.filterHighestPoint" disabled />
          </template>
        </el-table-column>
        <el-table-column prop="highestPointThreshold" label="最高点阀值" />
        <el-table-column prop="isActive" label="是否生效">
          <template #default="{ row }">
            <el-switch v-model="row.isActive" disabled />
          </template>
        </el-table-column>
        
  </el-table>
  </div>

</template>

<style scoped>
.radio-button {
  margin: -20px;
  width: 1335px;
  background-color: #100C2A;
  /* text-align: center; */
}

.select {
  margin-top: 20px;
  margin-left: -20px;
  width: 1335px;
  height: 100px;
  background-color: #100C2A;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 300px; 
}

.info {
  margin-top: 0px;
  margin-left: 0px;
  text-align: center;
  width: 1335px;
}



.echart {
  margin-top: 20px;
  text-align: center;
  background-color: aliceblue;
}
</style>